05. The Route Component

Route Component Intro

Add Routes To The App

Here's the commit with the changes made in this video.

Which Route matches?

If the browser loads the URL /houses/green, which of the following Routes will match?

<Route path="/houses" component={Houses} />

<Route exact path="/houses" component={Houses} />

<Route path="/houses/green" component={Houses} />

<Route exact path="/houses/green" component={Houses} />

<Route path="/" component={Houses} />

SOLUTION:

Task Description:

We're almost there! Let's quickly make sure we're both on the same page. Make sure to check off each of the following:

Task List:

I have imported Route in src/App.js

I have replaced the this.state.screen === 'list' code with a Route component

I have added an exact prop to the root Route

I have replaced the this.state.screen === create' code with a Route component

I have removed the onNavigate function from ListContacts

Task Feedback:

Excellent!

Route Component Recap

The main takeaway from this section is that with a Route component if you want to be able to pass props to a specific component that the router is going to render, you'll need to use Route’s render prop. As you saw, render puts you in charge of rendering the component which in turn allows you to pass any props to the rendered component as you'd like.

In summary, the Route component is a critical piece of building an application with React Router because it's the component which is going to decide which components are rendered based on the current URL path.

Next Concept

Learn Udacity: click here to learn more :)